<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--这里有一个问题 会复用输入框 vue在进行DOM渲染时 出于性能的考虑 会进可能的复用已经存在的元素-->
<!--而不是 重新创建新的元素  如果不想复用可以使用key 作为标识 如果key不一致 就不会复用-->
<div id="app">
 <span v-if="isUser">
 <label for="username">用户名登陆</label>
   <input type="text" id="username" placeholder="用户名" key="username">
 </span>
  <span v-else>
    <label for="email">邮箱登陆</label>
    <input type="text" id="email" placeholder="邮箱" key="email">
  </span>
  <button @click="switchLogin">切换登录类型</button>
</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      isUser:true,
    },
    methods:{
      switchLogin(){
        this.isUser = !this.isUser;
      }
    }

  })
</script>

</body>
</html>